<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css"/>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script src="data/voyage.js"></script>
<script src="symbol_path.js"></script>

<script>
var map;

function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(0, 0),
    zoom: 2,
    maxZoom: 20,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true,
    zoomControl: true
  });

  var lineCoords = new google.maps.MVCArray();
  for (var i = 0; i < data.length; i++) {
    lineCoords.push(new google.maps.LatLng(data[i].lat, data[i].lng));
  }

  var arrowSymbol = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
  };

  var shipSymbol = {
    path: symbolPath,
    strokeColor: 'black',
    strokeOpacity: 1.0,
    strokeWeight: 1.5,
    scale: .1,
    fillOpacity: 0,
    anchor: new google.maps.Point(100, 100)
  };

  var line = new google.maps.Polyline({
    path: lineCoords,
    strokeWeight: 1,
    strokeOpacity: .3,
    icons: [
    {
      icon: shipSymbol,
      offset: 0,
      strokeOpacity: 1
    },
    {
      icon: arrowSymbol,
      offset: '10px',
      repeat: '2%'
    }],
    map: map
  });

  var icons = line.get('icons');
  var count = 0;

  function animate() {
    count++;
    icons[0].offset = (count / lineCoords.length)  + '%';
    line.set('icons', icons);
    if (icons[0].offset >= 100) {
      count = 0;
    }
    window.webkitRequestAnimationFrame(animate);
  }

  window.webkitRequestAnimationFrame(animate);
}
</script>

</head>

<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>
